<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入省市区的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/address.css"/>
    <!-- 引入bootstrap-5.3.0 -->
    <link rel="stylesheet" type="text/css" href="static/js/bootstrap-5.3.0/css/bootstrap.min.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入省市区的公共脚本 -->
    <script src="static/js/owner/address.js"></script>
    <script src="static/js/owner/city_code.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>
<body>
<!-- 工具栏 -->
<div id="toolbar">
    <!-- 查询表单 -->
    <form id="searchForm" class="custom-search-form">
        <div class="custom-search-form__group">
            <label>机柜编号:</label>
            <input class="easyui-textbox" name="boxId">
        </div>
        <div class="custom-search-form__group">
            <label>机构:</label>
            <input class="easyui-textbox" name="orgName">
        </div>
        <div class="custom-search-form__group">
            <label>代理:</label>
            <input class="easyui-textbox" name="agentName">
        </div>
        <div class="custom-search-form__group">
            <label>商户:</label>
            <input class="easyui-textbox" name="mercName">
        </div>
        <div class="custom-search-form__group">
            <label>所属门店:</label>
            <input class="easyui-textbox" name="storeName">
        </div>
        <div class="custom-search-form__group">
            <label>在线状态:</label>
            <input name="isOnline" class="easyui-combobox" data-options="
                valueField: 'ourId',
                textField: 'ourValue',
                data: [
                    {ourId: '0', ourValue: '在线'},
                    {ourId: '1', ourValue: '离线'}
                ],
                panelHeight: 'auto',
                editable: false,
                prompt: '请选择'
            ">
        </div>
        <div class="custom-search-form__group">
            <label>是否缺宝:</label>
            <input name="bili" class="easyui-combobox" data-options="
                valueField: 'value',
                textField: 'id',
                data: [
                    {id: '否', value: '0'},
                    {id: '是', value: '1'}
                ],
                panelHeight: 'auto',
                editable: false,
                prompt: '请选择'
            ">
        </div>
        <div class="custom-search-form__group">
            <label>使用状态:</label>
            <input name="boxStatus" class="easyui-combobox" data-options="
                data:[
                    {ourId:'1',ourValue:'正常'},
                    {ourId:'2',ourValue:'损坏'},
                    {ourId:'3',ourValue:'禁用'}
                ],
                valueField: 'ourId',
                textField: 'ourValue',
                panelHeight: 'auto',
                editable: false,
                prompt: '请选择'
            ">
        </div>
        <div class="custom-search-form__group">
            <label>发货状态:</label>
            <input name="status" class="easyui-combobox" data-options="
                url: 'static/js/owner/test3.json',
                valueField: 'ourId',
                textField: 'ourValue',
                method: 'get',
                panelHeight: 'auto',
                editable: false,
                prompt: '请选择'
            ">
        </div>
        <div class="custom-search-form__group">
            <label>创建时间:</label>
            <input id="createTime" class="easyui-datebox daterange" name="createTime">
        </div>
        <div class="custom-search-form__group">
            <label>省:</label>
            <input class="easyui-textbox" name="province">
        </div>
        <div class="custom-search-form__group">
            <label>市:</label>
            <input class="easyui-textbox" name="city">
        </div>
        <div class="custom-search-form__group">
            <label>区:</label>
            <input class="easyui-textbox" name="area">
        </div>
        <div class="custom-search-form__actions">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchData()">查询</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="resetSearch()">重置</a>
        </div>
    </form>
    <!-- 操作按钮 -->
    <div style="margin-top: 20px;margin-bottom: 10px">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
           onclick="newUser()">新增</a>
        <a href="javascript:void(0)" id="editBtn" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
           onclick="editUser()">编辑</a>
        <a href="javascript:void(0)" id="removeBtn" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
           onclick="destroyUser()">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="excelDoc('tChargeBox/export')">导出</a>
        <a href="javascript:void(0)" id="detailBtn" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="viewDetails(``)">查看详情</a>
        <a href="javascript:void(0)" id="refreshBtn" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="reload()">刷新</a>
    </div>
</div>

<!-- 数据表格 -->
<table id="datagrid" class="easyui-datagrid">
    <thead>
    <tr>
        <!-- 复选框 -->
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'id',width:100">主键</th>
        <th data-options="field:'boxId',width:100">机柜编号</th>
        <th data-options="field:'modelId',width:100">设备型号</th>
        <th data-options="field:'createTime',width:150,sortable:true,formatter:formatDate">入库时间</th>
        <th data-options="field:'signalStrength',width:100">信号强度</th>
        <th data-options="field:'lastUseTime',width:150,sortable:true,formatter:formatDate">最后使用时间</th>
        <th data-options="field:'isOnline',width:80,formatter:function(value,row,index) {return generalFormatter(value, row, index, {'0':'在线','1':'离线'}, '未知');}">在线状态</th>
        <th data-options="field:'onlineTime',width:150,sortable:true,formatter:formatDate">最后在线时间</th>
        <th data-options="field:'boxStatus',width:100,formatter:function(value,row,index) {return generalFormatter(value, row, index, {'1':'正常','2':'损坏','3':'禁用'}, '未知');}">使用状态</th>
        <th data-options="field:'storeId',width:100">所属门店</th>
        <th data-options="field:'status',width:80">发货状态</th>
        <th data-options="field:'buyPerson',width:100,formatter:function(value,row,index) {return `<font color=red>${value}</font>`}">购买人</th>
        <th data-options="field:'buyTime',width:150,sortable:true,formatter:formatDate">购买时间</th>
        <th data-options="field:'province',width:100">省</th>
        <th data-options="field:'city',width:100">市</th>
        <th data-options="field:'area',width:100">区</th>
        <th data-options="field:'systemApart',width:100">系统区别</th>
        <th data-options="field:'deviceName',width:150">主板编号</th>
        <th data-options="field:'generalAgent',width:150">所属总代</th>
        <th data-options="field:'merchantNumber',width:150">所属商户</th>
        <th data-options="field:'organizedId',width:150">机构id</th>
        <th data-options="field:'firstUsetime',width:150,sortable:true,formatter:formatDate">首次使用时间</th>
        <th data-options="field:'qrCode',width:200,formatter:function(value, row, index){return formatImage(value, row, index, 100, 100, '二维码');}">二维码</th>
        <th data-options="field:'thirdOpertype',width:100,formatter:function(value,row,index) {return generalFormatter(value, row, index, {'0':'融邦','1':'青创','2':'佰创'}, '未知');}">三方平台使用</th>
    </tr>
    </thead>
</table>

<!-- 对话框，用于新增和编辑记录 -->
<div id="dlg" class="easyui-dialog custom-dlg" style="width:800px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" class="custom-dlg-form" enctype="multipart/form-data" >
        <!-- 隐藏的 ID 字段 -->
        <input type="hidden" name="id">
        <input type="hidden" name="boxId">

        <div>

        </div>
        <div class="form-container">
            <!-- 左侧列 -->
            <div class="form-column">
                <!-- 机柜编号 -->
                <div class="form-group">
                    <label>机柜编号</label>
                    <input name="boxId" class="easyui-textbox" style="width:100%">
                </div>
                <!-- 设备型号 -->
                <div class="form-group">
                    <label>设备型号</label>
                    <input name="modelId" class="easyui-textbox" style="width:100%">
                </div>
                <!-- 入库时间 -->
                <div class="form-group">
                    <label>入库时间</label>
                    <input name="createTime" class="easyui-datetimebox" data-options="formatter:formatter,parser:parser" style="width:100%">
                </div>
                <!-- 信号强度 -->
                <div class="form-group">
                    <label>信号强度</label>
                    <input name="signalStrength" class="easyui-numberbox" style="width:100%">
                </div>
                <!-- 使用状态 -->
                <div class="form-group">
                    <label>使用状态</label>
                    <input name="boxStatus" class="easyui-combobox" data-options="
                        valueField:'id',textField:'text',
                        data:[
                            {id:'1',text:'正常'},
                            {id:'2',text:'损坏'},
                            {id:'3',text:'禁用'}
                        ],
                        editable: false,
                        prompt: '请选择使用状态',
                        panelHeight:'auto'" style="width:100%">
                </div>
            </div>

            <!-- 右侧列 -->
            <div class="form-column">
                <!-- 购买人 -->
                <div class="form-group">
                    <label>购买人</label>
                    <input name="buyPerson" class="easyui-textbox" style="width:100%">
                </div>
                <!-- 购买时间 -->
                <div class="form-group">
                    <label>购买时间</label>
                    <input name="buyTime" class="easyui-datetimebox" data-options="formatter:formatter,parser:parser" style="width:100%">
                </div>
                <!-- 二维码 -->
                <div class="form-group">
                    <label>二维码</label>
                    <div class="pic-container">
                        <img id="preView" name="" src="" alt="二维码预览" class="thumbnail">
                        <input type="file" name="file" accept="image/*" onchange="prev(this)">
                    </div>
                </div>
                <!-- 发货状态 -->
                <div class="form-group">
                    <label>发货状态</label>
                    <input name="status" class="easyui-combobox" data-options="
                        valueField:'id',textField:'text',
                        data:[
                            {id: '-1', text: '未入库'},
                            {id: '0', text: '未配置'},
                            {id: '1', text: '已发货'},
                            {id: '2', text: '发货中'},
                            {id: '3', text: '已使用'},
                            {id: '4', text: '撤库中'},
                            {id: '5', text: '已配置未使用'}
                        ],
                        editable: false,
                        prompt: '请选择发货状态',
                        panelHeight:'auto'" style="width:100%">
                </div>
                <!-- 门店编号 -->
                <div class="form-group">
                    <label>门店编号</label>
                    <input name="storeId" class="easyui-textbox" style="width:100%">
                </div>
            </div>
        </div>
    </form>
    <!-- 对话框的按钮 -->
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</div>

<!-- 详细信息窗口 -->
<div id="detailWindow" class="easyui-window detail-window" title="详细信息" data-options="modal:true,iconCls:'icon-save',closed:true">
    <div class="detail-window__layout">
        <!-- 上方详情信息 -->
        <div class="detail-window__header">
            <div class="container">
                <div class="row">
                    <div class="col-4">
                        <!-- 占 4/12 宽度的列 -->ds
                    </div>
                    <div class="col-8">
                        <!-- 占 8/12 宽度的列 -->ds
                    </div>
                </div>
                <div class="row">
                    <div class="col-4">
                        <!-- 占 4/12 宽度的列 -->ds33
                    </div>
                    <div class="col-8">
                        <!-- 占 8/12 宽度的列 -->33
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        Column
                    </div>
                    <div class="col">
                        Column
                    </div>
                    <div class="col">
                        Column
                    </div>
                </div>

            </div>
        </div>

        <!-- 中间数据表格 -->
        <div class="detail-window__table-container">
            <table id="detailTable" class="easyui-datagrid" style="width:100%;height:100%;"
                   data-options="singleSelect:true,fitColumns:true">
                <thead>
                <tr>
                    <th data-options="field:'boxPosition',width:150">宝仓编号</th>
                    <th data-options="field:'palId',width:150">充电宝编号</th>
                    <th data-options="field:'electricity',width:150">电量信息</th>
                </tr>
                </thead>
            </table>
        </div>

        <!-- 底部操作按钮 -->
        <div class="detail-window__footer">
            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:$('#detailWindow').window('close');" style="width:100px;">关闭</a>
            <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="javascript:void(0)" onclick="refreshDetailWindow();" style="width:120px;">实时监测</a>
        </div>
    </div>
</div>

</body>
<!-- 定义页面脚本 -->
<script type="text/javascript">
var url; // 定义全局变量，保存当前操作的URL

$(function () {
    $('#tt').tabs('add',{
        title:'New Tab',
        content:'Tab Body',
        closable:true,
        tools:[{
            iconCls:'icon-mini-refresh',
            handler:function(){
                alert('refresh');
            }
        }]
    });

    const pageConfig = {
        url: 'tChargeBox/selectTchargeBoxList', // 数据源URL
        emptyMsg: '暂无数据',     //当 DataGrid 中没有数据时，会在表格中间显示“暂无数据”的提示。
        onBeforeLoad: function (param) {
            let count = 0;
            for (let key in param) {
                if (param.hasOwnProperty(key)) {
                    count++;
                }
            }
            if (count <= 2) {
                // 获取当前日期
                var today = new Date();

                // 格式化日期为 YYYY-MM-DD
                var year = today.getFullYear();
                var month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1
                var day = today.getDate().toString().padStart(2, '0');
                var today = year + '-' + month + '-' + day;

                param.params = {};
                param.params['createTimeStart'] = today;
                param.params['createTimeEnd'] = today;
            }
        }
    };

    // 调用公共函数初始化 DataGrid
    initializeDataGrid(pageConfig);

    // 批量初始化所有类名为 daterange 的输入框
    initializeDateRangePickers('.daterange');
});

function newUser() {
    $('#dlg').dialog('open').dialog('setTitle', '新增记录').window('center'); // 打开对话框
    $('#fm').form('clear'); // 清空表单
    url = 'tChargeBox/save'; // 设置新增记录的请求URL

    $('#preView').attr('src', ''); // 清空图像预览
}

// 编辑记录
function editUser() {
    var row = $('#datagrid').datagrid('getSelected'); // 获取选中行
    if (row) {
        $('#dlg').dialog('open').dialog('setTitle', '编辑记录').window('center');
        $('#fm').form('load', row); // 加载选中行的数据到表单
        url = 'tChargeBox/update'; // 设置更新记录的请求URL

        if (row.qrCode) {
            $('#preView').attr('src', row.qrCode); // 假设 `row.qrCode` 是图片 URL
        } else {
            $('#preView').attr('src', ''); // 如果没有二维码，清空图像预览
        }
    } else {
        $.messager.alert('提示', '请先选择要编辑的记录！', 'info');
    }
}

function saveUser() {
    removeEmptyFields('#fm');

    // 阻止表单的默认提交
    $('#fm').form('submit', {
        url: url,  // 提交的URL
        onSubmit: function () {
            // 可以在这里添加验证逻辑
            return $(this).form('validate');
        },
        success: function (response) {
            // 提交成功后的回调
            $('#dlg').dialog('close');  // 关闭对话框
            $('#datagrid').datagrid('reload'); // 刷新数据表格
        },
        error: function () {
            alert('保存失败');
        }
    });
}

// 删除记录
function destroyUser() {
    var row = $('#datagrid').datagrid('getSelected');
    if (row) {
        $.messager.confirm('确认', '你确定要删除这条记录吗？', function (r) {
            if (r) {
                $.post('tChargeBox/delete', {id: row.id}, function (result) {
                    if (result.code == '200') {
                        $('#datagrid').datagrid('reload'); // 刷新数据表格
                    } else {
                        $.messager.show({
                            title: '错误',
                            msg: result.errorMsg
                        });
                    }
                }, 'json');
            }
        });
    } else {
        $.messager.alert('提示', '请先选择要删除的记录！', 'info');
    }
}

// 没有选中时 || 中多条数据时, 禁用哪些按钮
function disable() {
    $('#editBtn').linkbutton('disable');
    $('#removeBtn').linkbutton('disable');
    $('#detailBtn').linkbutton('disable');
}

// 选中一条数据时启用哪些按钮
function enable() {
    $('#editBtn').linkbutton('enable');
    $('#removeBtn').linkbutton('enable');
    $('#detailBtn').linkbutton('enable');
}

// 图片预览和大小验证
function prev(input) {
    if (input.files && input.files[0]) {
        var file = input.files[0];
        if (file.size > 2 * 1024 * 1024) { // 2MB
            $.messager.alert('警告', '上传的图片不能超过2MB!', 'warning');
            input.value = '';
            $(input).siblings('.thumbnail').attr('src', '');
            return;
        }
        var reader = new FileReader();
        reader.onload = function(e) {
            var imgSrc = e.target.result;
            // 设置缩略图
            $(input).siblings('.thumbnail').attr('src', imgSrc);
        }
        reader.readAsDataURL(file);
    }
}

// 打开详情窗口
function viewDetails() {
    var row = $('#datagrid').datagrid('getSelected');
    // 存储当前的 boxId 在窗口的 data 属性中，以便后续使用
    $('#detailWindow').data('boxId', row.boxId);

    $('#detailWindow').window({
        title: '详细信息',
        width: 800,
        height: 600,
        modal: true,
        onOpen: function() {
            // 加载上方的详细信息
            loadDetailInfo(row.boxId);
            // 加载中间的表格数据
            loadDetailTable(row.boxId);
        },
        onClose: function() {
            // 清空窗口内容
            $('#detailInfo span').text('加载中...');
            $('#detailTable').datagrid('loadData', { total: 0, rows: [] });
        }
    }).window('open').window('center');
}

// 加载上方的详细信息
function loadDetailInfo(boxId) {
    $.ajax({
        url: 'static/js/owner/test.json',
        type: 'GET',
        data: { boxId: boxId },
        success: function(data) {
            if (data) {
                $('#boxId').text(data[0].boxId || '无数据');
                $('#onlineTime').text(123 || '无数据');
                $('#isOnline').text(data[0].isOnline ? '在线' : '离线');
            } else {
                $.messager.alert('提示', '未找到机柜信息', 'info');
            }
        },
        error: function() {
            $.messager.alert('错误', '加载机柜信息失败', 'error');
        }
    });
}

// 加载中间的数据表格
function loadDetailTable(boxId) {
    $('#detailTable').datagrid({
        url: 'static/js/owner/test2.json',
        queryParams: { boxId: boxId },
        method: 'get',
        fitColumns: true,
        loadMsg: '数据加载中，请稍后...',
        emptyMsg: '暂无数据',     //当 DataGrid 中没有数据时，会在表格中间显示“暂无数据”的提示。
        onLoadError: function() {
            $.messager.alert('错误', '加载表格数据失败', 'error');
        }
    });
}

// 刷新窗口内的所有数据
function refreshDetailWindow() {
    var boxId = $('#detailWindow').data('boxId'); // 获取存储的 boxId
    if (!boxId) {
        $.messager.alert('提示', '无效的机柜编号', 'info');
        return;
    }

    // 重新加载上方的详细信息
    loadDetailInfo(boxId);
    // 重新加载中间的表格数据
    $('#detailTable').datagrid('reload'); // EasyUI 提供的 reload 方法会使用当前的 queryParams
}

function reload() {
    // 刷新
    $('#datagrid').datagrid('reload');
}
</script>
</body>
</html>
